<template>
  <div>
    <!-- 定义批次档案失效日期el-dialog对话框 -->
    <el-dialog :visible="visible" width="50%" @close="handleClose" :close-on-click-modal="false" :close-on-press-escape="false"
      :title="printData.cmaterialoid ? printData.cmaterialoid.name + '-' + printData.vbatchcode : ''">
      <!-- 这里可以放置对话框内部的内容 -->
      <el-row :gutter="15">
        <el-form ref="elForm" :model="formData" size="medium" label-width="120px" :rules="rules" label-position="right">
          <el-col :span="12">
            <el-form-item label="一物一码" prop="isOneCode" v-show="printData.vbatchcode && formData.printMode != '2'">
              <el-select @change="handleOneCode" v-model="formData.isOneCode" placeholder="请选择一物一码" clearable
                :style="{ width: '100%' }">
                <el-option v-for="(item, index) in isOneCodeOptions" :key="index" :label="item.label"
                  :value="item.value"></el-option>
              </el-select>
            </el-form-item>
          </el-col>
          <el-col :span="12">
            <el-form-item label="级别" prop="level" v-show="printData.vbatchcode && formData.printMode != '2'">
              <el-select @change="handleLevel" :disabled="formData.isOneCode == false ? true : false"
                v-model="formData.level" placeholder="请选择级别" clearable :style="{ width: '100%' }">
                <el-option v-for="(item, index) in levelOptions" :key="index" :label="item.label"
                  :value="item.value"></el-option>
              </el-select>
            </el-form-item>
          </el-col>
          <el-col :span="12">
            <el-form-item label="最小数量使用" prop="minUse" v-show="printData.vbatchcode && formData.printMode != '2'">
              <el-switch v-model="formData.minUse" active-color="#13ce66" inactive-color="#ff4949" active-text="是"
                inactive-text="否">
              </el-switch>
            </el-form-item>
          </el-col>
          <el-col :span="12">
            <el-form-item label="是否有零箱" v-show="printData.vbatchcode && formData.printMode != '2'">
              <el-switch v-model="formData.def1" :active-value="'1'" :inactive-value="'0'" active-color="#13ce66"
                inactive-color="#ff4949" active-text="是" inactive-text="否">
              </el-switch>
            </el-form-item>
          </el-col>
          <el-col :span="12">
            <el-form-item label="是否允许超数" v-if="['0'].includes(formData.printMode)">
              <el-switch v-model="formData.overMax" :active-value="1" :inactive-value="0" active-color="#13ce66"
                inactive-color="#ff4949" active-text="是" inactive-text="否">
              </el-switch>
            </el-form-item>
          </el-col>
          <el-col :span="12">
            <el-form-item label="零箱是否打勾" v-if="['0'].includes(formData.printMode)">
              <el-switch v-model="formData.def2" :active-value="'0'" :inactive-value="'1'" active-color="#13ce66"
                inactive-color="#ff4949" active-text="是" inactive-text="否">
              </el-switch>
            </el-form-item>
          </el-col>
   <!--       <el-col :span="12">
            <el-form-item label="日期显示" v-if="['0'].includes(formData.printMode)">
              <el-switch v-model="formData.def3" :active-value="'1'" :inactive-value="'0'" active-color="#13ce66"
                inactive-color="#ff4949" active-text="是" inactive-text="否">
              </el-switch>
            </el-form-item>
          </el-col> -->
          <el-col :span="12">
            <el-form-item label="整件包装数量" prop="skuNnum"
              v-show="printData.vbatchcode && formData.minUse && formData.printMode != '2'">
              <el-input v-model="formData.skuNnum" placeholder="请输入整件包装数量" clearable :style="{ width: '100%' }">
              </el-input>
            </el-form-item>
          </el-col>
          <el-col :span="12">
            <el-form-item label-width="170px" label="二级包装内一级包装数量" prop="packagingRatio"
              v-show="printData.vbatchcode && formData.printMode != '2'">
              <el-input :disabled="formData.level == 1 || formData.isOneCode == false ? true : false"
                v-model="formData.packagingRatio" placeholder="二级包装内一级包装数量" clearable :style="{ width: '100%' }">
              </el-input>
            </el-form-item>
          </el-col>
          <el-col :span="12">
            <el-form-item label="打印标签数量" prop="printNumber" v-if="['0'].includes(formData.printMode) && formData.isOneCode == true">
              <el-input :disabled="formData.isOneCode == false ? true : false" v-model="formData.printNumber"
                placeholder="请输入最小标签数量" clearable :style="{ width: '100%' }">
              </el-input>
            </el-form-item>
          </el-col>
          <el-col :span="12">
            <el-form-item label="容器号" prop="sortNum"
              v-if="(printData.vbatchcode && formData.printMode == '2') && formData.isOneCode == true">
              <el-input v-model="formData.sortNum" placeholder="请输入容器号" clearable :style="{ width: '100%' }">
              </el-input>
            </el-form-item>
          </el-col>
          <!--          <el-col :span="12">
            <el-form-item label="容器号" prop="sortNumXuDa"
              v-if="(printData.vbatchcode && formData.printMode == '0') && formData.isOneCode == true">
              <el-input v-model="formData.sortNum" placeholder="请输入容器号" clearable :style="{ width: '100%' }">
              </el-input>
            </el-form-item>
          </el-col> -->
          <el-col :span="12">
            <el-form-item label="已打标签数量" prop="printedNum" v-show="printData.vbatchcode && formData.printMode != '2'">
              <el-input :disabled="true" v-model="formData.printedNum" clearable :style="{ width: '100%' }">
              </el-input>
            </el-form-item>
          </el-col>
          <el-col :span="12">
            <el-form-item label-width="125px" label="已打全部标签数量" prop="totalSkuNum"
              v-show="printData.vbatchcode && formData.printMode != '2'">
              <el-input :disabled="true" v-model="formData.totalSkuNum" clearable :style="{ width: '100%' }">
              </el-input>
            </el-form-item>
          </el-col>
          <el-col :span="12">
            <el-form-item label="总数量" prop="totalNum" v-show="printData.vbatchcode && formData.printMode != '2'">
              <el-input :disabled="true" v-model="formData.totalNum" clearable :style="{ width: '100%' }">
              </el-input>
            </el-form-item>
          </el-col>
          <el-col :span="12">
            <el-form-item label="打印模式" v-if="printData.vbatchcode" prop="printMode">
              <el-select @change="changeSort" v-model="formData.printMode" clearable :style="{ width: '100%' }">
                <el-option v-for="(item, index) in printModel" :key="index" :label="item.name"
                  :value="item.value"></el-option>
              </el-select>
            </el-form-item>
          </el-col>
          <el-col :span="12">
            <el-form-item label="模板选择" prop="temp" v-if="['0','2'].includes(formData.printMode)">
              <el-select v-model="formData.temp" clearable :style="{ width: '100%' }">
                <el-option v-for="(item, index) in tempList" :key="index" :label="item.label"
                  :value="item.value"></el-option>
              </el-select>
            </el-form-item>
          </el-col>
          <el-col :span="12">
            <el-form-item label="物料代码映射" prop="finallyCode" v-if="['0','2'].includes(formData.printMode)">
              <el-radio-group v-model="formData.finallyCode">
                <el-radio label="1">供应商代码</el-radio>
                <el-radio label="2">GMP码</el-radio>
              </el-radio-group>
            </el-form-item>
          </el-col>
          <el-col :span="24" v-if="formData.def1 == '1' && !['1', '2'].includes(formData.printMode)">
            <el-form-item label="零箱合集">
              <el-button @click="addTable" type="primary" style="margin: 10px 0;">新增</el-button>
              <el-table :data="zeroPrintList" height="300px">
                <el-table-column label="序号" type="index"></el-table-column>
                <el-table-column label="整件包装数量">
                  <template slot-scope="scope">
                    <el-input v-model="scope.row.skuNnum" placeholder="请输入整件包装数量"></el-input>
                  </template>
                </el-table-column>
                <el-table-column label="操作" width="120">
                  <template slot-scope="scope">
                    <el-button type="text" size="mini" icon="el-icon-delete"
                      @click="removeRow(scope.$index)">删除</el-button>
                  </template>
                </el-table-column>
              </el-table>
            </el-form-item>
          </el-col>
          <el-col :span="24">
            <el-form-item label="已打印列表">
              <el-tree ref="treeRef" :data="treeData" node-key="skuBarId" :props="defaultProps">
                <span class="custom-tree-node" slot-scope="{ node, data }">
                  <div>
                    <span style="margin-right: 20px;">序列号</span>
                    <span style="margin-right: 20px;">{{ data.skuBarId || '无' }}</span>
                    <span style="margin-right: 20px;">容器号</span>
                    <span style="margin-right: 20px;">{{ data.sortNum || '无' }}</span>
                    <span v-if="data.children.length == 0" style="margin-right: 20px;">数量</span>
                    <span v-if="data.children.length == 0" style="margin-right: 20px;">{{ data.skuNnum || '无' }}</span>
                  </div>
                </span>
              </el-tree>
            </el-form-item>
          </el-col>
          <el-col :span="12">
            <div class="iconPrint" @click="openInner"><i class="el-icon-warning"
                style="margin-right:5px;color: red;"></i>打印说明</div>
          </el-col>
          <el-col :span="24" v-if="formData.printMode == '2'">
            <div style="color: red;height: 36px;line-height: 36px;padding-left: 15px;">
              *操作提示：补打则容器号输入如:001,批量补打则输入如:001-003,大码随补打小码自动带出</div>
          </el-col>
          <el-col :span="24" style=" display: flex; justify-content: flex-end;">
            <el-form-item size="large">
              <el-button type="primary" @click="submitPrint">打印</el-button>
              <el-button @click="handleClose">取消</el-button>
            </el-form-item>
          </el-col>
        </el-form>
      </el-row>
    </el-dialog>
    <el-dialog title="打印说明指南" :visible.sync="innerDialog" width="55%" class="print-guide-dialog">
      <div class="guide-container">
        <div class="guide-header">
          <i class="el-icon-printer"></i>
          <h3>标签打印参数说明</h3>
          <p>请仔细阅读以下参数说明，确保打印设置正确</p>
        </div>

        <div class="guide-content">
          <div class="guide-item" v-for="item in guideItems" :key="item.title">
            <div class="guide-icon" :style="{backgroundColor: item.color}">
              <i :class="item.icon"></i>
            </div>
            <div class="guide-text">
              <h4>{{ item.title }}</h4>
              <p v-html="item.content"></p>
            </div>
          </div>
        </div>
      </div>

      <span slot="footer" class="dialog-footer">
        <el-button type="primary" @click="innerDialog = false" class="confirm-btn">
          <i class="el-icon-check"></i> 我已理解
        </el-button>
      </span>
    </el-dialog>

    <goodsPrint v-show="false" ref="buyIndexRef"></goodsPrint>
  </div>
</template>

<script>
  //获取打印数量
  import {
    getCountPrint,
    findPrintedSkuList, //展示
  } from "@/api/basic/PersonnelInformation.js";

  import goodsPrint from '@/views/basic/print/printList/print.vue'
  export default {
    data() {
      return {
        zeroPrintList: [], //零箱
        innerDialog: false, //打印说明
        printData: {},
        formData: {
          isOneCode: true, //是否是一物一码 true创建 false不创建
          level: 1, //层级
          packagingRatio: '', //比例
          printNumber: '', //打印数量
          printedNum: 0,
          totalNum: 0,
          printMode: '0',
          skuNnum: 1,
          sortNum: '',
          finallyCode: '',
          minUse: false,
          def1: '0', //是否零箱
          totalSkuNum: 0, //已打印全部数量标签
          temp: '', //模板选择
          overMax:0,//是否超过最大数量
          def2:'1',//是否打勾
          //def3:'0',//是否显示有效期
        },
        printModel: [{
          name: '首次打印',
          value: '0'
        }, {
          name: '补打',
          value: '2'
        }, {
          name: '清空',
          value: '1'
        }, ], //打印模式
        isOneCodeOptions: [{
          "label": "是",
          "value": true
        }, {
          "label": "否",
          "value": false
        }],
        levelOptions: [{
          "label": "1级",
          "value": 1
        }, {
          "label": "2级",
          "value": 2
        }],
        tempList: [{
          value: 'commercialize',
          label: '物料标签(商业化物料)',
        }, {
          value: 'noCommercialize1',
          label: '物料标签(非商业化第1类)',
        }, {
          value: 'noCommercialize2',
          label: '物料标签(非商业化第2类)',
        }, {
          value: 'psyCommercialize',
          label: '物料精神药品标签(商业化)',
        }, {
          value: 'verification',
          label: '物料精神药品标签(验证阶段)',
        }, {
          value: 'experimental',
          label: '物料精神药品标签(试验开发阶段)',
        }, {
          value: 'boffin',
          label: '物料标签(研究院)',
        }, {
          value: 'productBiaoQ',
          label: '低耗备件标签'
        }, {
          value: 'sampleInstitute',
          label: '样品标签(研究院)',
        }, {
          value: 'productSample1',
          label: '精神商业化产品标签',
        }, {
          value: 'productSample2',
          label: '精神验证阶段产品标签',
        }, {
          value: 'productSample3',
          label: '精神试用开发产品标签',
        }, {
          value: 'productSample',
          label: '中间产品',
        }, {
          value: 'productSampleNew',
          label: '非商业化产品标签',
        }, {
          value: 'importantTip',
          label: '试剂/关键耗材标签'
        }], //模板选择
        rules: {
          sortNum: [{
            required: true,
            message: '请输入容器号',
            trigger: 'blur'
          }],
          printMode: [{
            required: true,
            message: '请选择打印模式',
            trigger: 'blur'
          }],
          finallyCode: [{
            required: true,
            message: '映射不能为空',
            trigger: 'change',
          }],
          temp: [{
            required: true,
            message: '模板不能为空',
            trigger: 'change',
          }],
          printNumber: [{
            required: true,
            message: '打印标签数量不能为空',
            trigger: 'blur',
          }],
        },
        rowIndex: '', //行号
        treeData: [], //查看树形打印
        defaultProps: {
          children: 'children',
          label: 'skuBarId',
          id: 'skuBarId', // 使用 skuBarId 作为唯一标识
        },
        guideItems: [{
            title: "一物一码",
            content: '要编批自编批号的原辅包选择<span class="highlight">"是"</span>，易耗品一类不按批次管理的则选择<span class="highlight">"否"</span>。',
            icon: "el-icon-collection-tag",
            color: "#FF9F43"
          },
          {
            title: "级别",
            content: '最多支持两级标签打印，根据实际情况选择，比如既要打印箱签又要打印瓶签，则选择<span class="highlight">"2级"</span>，只打印瓶签，则选择<span class="highlight">"1级"</span>。',
            icon: "el-icon-sort",
            color: "#7367F0"
          },
          {
            title: "最小数量使用",
            content: '根据<span style="color:#EA5455">最小</span>发放单位决定，比如500g/瓶，发放时以"g"为单位，则选择<span class="highlight">"是"</span>，发放时以"瓶"单位，则选择<span class="highlight">"否"</span>',
            icon: "el-icon-coin",
            color: "#EA5455"
          },
          {
            title: "是否零箱",
            content: '标签打印时，整包装和零头须分开打印，打印零头时此处<span class="highlight">"是"</span>，打印整包装时选择<span class="highlight">"否"</span>。',
            icon: "el-icon-box",
            color: "#28C76F"
          },
          {
            title: "整件包装数量",
            content: '本批次物料的最小独立包装规格，比如500g/瓶时，填写<span class="highlight">500</span>。',
            icon: "el-icon-odometer",
            color: "#00CFE8"
          },
          {
            title: "二级包装内一级包装数量",
            content: '每个二级包装内一级包装的数量，该处只能按整包装填写，比如3件*20瓶，则填写<span class="highlight">20</span>，3件*20瓶+1件*10瓶，还是填写<span class="highlight">20</span>。',
            icon: "el-icon-copy-document",
            color: "#9F44D3"
          },
          {
            title: "打印标签数量",
            content: '<span style="color:#EA5455">单次</span>需要打印的一级标签总数量，比如500g/瓶*60瓶，填写<span class="highlight">60</span>；500g/瓶*70瓶时，填写<span class="highlight">70</span>。',
            icon: "el-icon-printer",
            color: "#409EFF"
          },
          {
            title: "容器号",
            content: '已打印的1级标签里面，所对应的最大的容器号，比如首次打印时不填写，已打印了6张1级标签时，再次打印时，容器号填写<span class="highlight">6</span>。',
            icon: "el-icon-tickets",
            color: "#FF7D00"
          }
        ]
      }
    },
    props: ['visible'],
    components: {
      goodsPrint
    },
    watch: {
      'formData.def1'(newVal) {
        if (newVal === '1') {
          this.zeroPrintList = []; // 清空 zeroPrintList
        }
      },
      treeData: {
        handler(newVal) {
          if (newVal && newVal.length > 0) {
            this.$message.warning('已有打印数据，重新打印请清空数据后再试');
          }
        },
      }
    },
    methods: {
      // 向数组添加一个新对象，包含默认值
      addTable() {
        this.zeroPrintList.push({
          skuNnum: 1, //整件包装数量
          def1:'1'
        });
      },
      //删除当前行
      removeRow(index) {
        // 删除指定索引的行
        this.zeroPrintList.splice(index, 1);
      },
      //打开说明
      openInner() {
        this.innerDialog = true;
      },
      //获取已打印列表
      getTree() {
        let params = {
          pkMarbasclass: this.printData.cmaterialoid.pk,
          pkBatchcode: this.printData.pk_batchcode,
          row: this.rowIndex,
          level: this.formData.level
        }
        findPrintedSkuList(params).then(res => {
          this.treeData = res.data.vos;
        })
      },
      //切换打印模式
      changeSort() {
        this.formData.sortNum = '';
      },
      //是否一物一码
      handleOneCode(e) {
        if (e == 2) {
          this.formData.level = '';
        } else {
          this.formData.level = '1';
        }
        this.formData.packagingRatio = '';
      },
      // 提取重置表单的逻辑
      handleClose() {
        this.$nextTick(() => {
          this.$refs.elForm.resetFields();
          this.formData.sortNum = '';
          this.formData.sortNumXuDa = '';
          this.zeroPrintList = [];
        })
        // 通过事件通知父组件更新visible值，触发update:visible事件
        this.$emit('update:visible', false);
      },
      openDialog(row, data) {
        this.printData = row;
        this.rowIndex = data;
        this.formData.minUse = 0;
        this.formData.def1 = '0';
        this.formData.overMax = 0;//超过数量
        this.formData.def2 = '1';//打勾
        this.getCount();
      },
      //限制不能超过100
      // handlePrintNumberInput(value) {
      //   const numValue = Number(value.replace(/[^\d]/g, '')); // 提取数字部分并转换为数字类型
      //   const sum = numValue + Number(this.formData.printedNum);
      //   if (sum > 100 && sum < Number(this.formData.totalNum) ||
      //     sum === Number(this.formData.totalNum) // 新增条件：sum 等于 totalNum 时也设为 100
      //   ) {
      //     this.formData.printNumber = 100;
      //   } else if (sum > Number(this.formData.totalNum)) {
      //     this.formData.printNumber = Number(this.formData.totalNum) - Number(this.formData.printedNum);
      //   } else {
      //     this.formData.printNumber = numValue || null;
      //   }
      // },
      //补打限制容器号
      // handleSort(value) {
      //   const numValue = Number(value.replace(/[^\d]/g, '')); // 提取数字部分并转换为数字类型
      //   const sum = Number(this.formData.printedNum);
      //   if (numValue > sum) {
      //     this.formData.sortNum = '';
      //     this.$message.error('只能打印小于已达数量的数据!');
      //   } else {
      //     this.formData.sortNum = numValue;
      //   }
      // },
      //为了解决打印数量准确性
      async handleLevel(e) {
        if (e == 1) {
          this.formData.packagingRatio = '';
        } else if (e == 2) {
          this.formData.packagingRatio = '1';
        }

        // 先获取计数
        await this.getCount();
      },
      //获取打印数量
      getCount() {
        let params = {
          pkMaterial: this.printData.cmaterialoid.pk, //商品Pk
          skuName: this.printData.cmaterialoid.name, //商品名称
          manufacturer: this.printData.cproductorid?.name ?? '', // 如果 cproductorid 或 name 为 null/undefined，返回空字符串 '',
          manufacturerBatchCode: this.printData.cproductorid?.code ?? '', //厂家code
          resetDate: this.printData.vbdef48, //复验期
          productionDate: this.printData.dproducedate, //生产日期
          isOneCode: this.formData.isOneCode, //级别
          packagingRatio: this.formData.packagingRatio, //包装比例
          level: this.formData.level, //层级
          printNumber: this.formData.printNumber, //打印数量
          number: this.printData.nshouldnum ? this.printData.nshouldnum : this.printData.nnum, //应收主数量
          skuState: this.printData.skuState, //商品状态
          skuUnit: this.printData.cunitid?.name ?? '', //单位
          vbillcode: this.printData.vbillcode, //单据号
          batchCode: this.printData.pk_batchcode, //批次
          vbatchCode: this.printData.vbatchcode, //自定义批次
          expirationDate: this.printData.dvalidate, //失效期
          graphid: this.printData?.graphid ?? this.printData?.additionMap?.graphid ?? '', //GMP
          row: this.rowIndex, //行号
          beforePrintFlag: '0', //不是期初打印
        };
        getCountPrint(params).then(res => {
          this.formData.totalNum = res.data.totalNum;
          this.formData.printedNum = res.data.printedNum;
          this.formData.totalSkuNum = res.data.totalSkuNum; //已打印全部标签数量
          this.getTree();
        })
      },
      //打印标签
      submitPrint() {
        this.$refs.elForm.validate((valid) => {
          if (!valid) {
            return; // 验证不通过直接返回
          }

          let tips = '';
          if (this.formData.printMode == '1') {
            tips = "点击打印将'清空所有'已打印数据";
          } else {
            tips = '点击打印默认将数据存储了哦';
          }

          this.$confirm(tips, '提示', {
            confirmButtonText: '确定',
            cancelButtonText: '取消',
            type: 'warning'
          }).then(() => {
            let params = {
              batchCode: this.printData.pk_batchcode, //批次号
              skuUnit: this.printData.cunitid.name, //单位
              pkMaterial: this.printData.cmaterialoid.pk, //商品PK
              skuName: this.printData.cmaterialoid.name, //商品名
              resetDate: this.printData.vbdef48, //复验期
              productionDate: this.printData.dproducedate, //生产时间
              isOneCode: this.formData.isOneCode, //是否一物一码
              packagingRatio: this.formData.packagingRatio, //包装比例
              level: this.formData.level, //层级
              printNumber: this.formData.printNumber, //打印数量
              number: this.printData.nshouldnum ? this.printData.nshouldnum : this.printData.nnum, //打印总数
              skuState: this.printData.skuState, //商品状态
              vbillcode: this.printData.vbillcode, //单号
              vbatchCode: this.printData.vbatchcode, //批号
              expirationDate: this.printData.dvalidate, //有效期
              skuNnum: this.formData.skuNnum, //整件包装数量
              graphid: this.printData?.graphid ?? this.printData?.additionMap?.graphid ?? '', //GMP
              printMode: this.formData.printMode, //打印模式
              sortNum: this.formData.sortNum, //容器号
              minUse: this.formData.minUse, //最小比例
              printedNum: this.formData.printedNum, //已打印数量
              row: this.rowIndex, //行号
              manufacturer: this.printData.cproductorid?.name ?? '', //生产厂商
              manufacturerBatchCode: this.printData.cproductorid?.code ?? '', //生产商code
              def1: this.formData.def1, //是否零箱
              supplierCode: this.printData?.vbcdef2 ?? '', //供应商代码
              beforePrintFlag: '0', //不是期初打印
              finallyCode: this.formData.finallyCode, //选择到底映射那个字段
              zeroPrintList: this.zeroPrintList, //统一处理零箱
              overMax:this.formData.overMax,//是否超越总数
              totalSkuNum:this.formData.totalSkuNum,//已打印标签总数量
              def2:this.formData.def2,//是否打勾
              //def3:this.formData.def3,//是否有效期
              // skuCode:this.printData.cmaterialoid.code
            };
            this.$refs.buyIndexRef.printCode(this.formData.temp, params);
            this.handleClose();
          }).catch(() => {});
        });
      }
    }
  }
</script>

<style scoped lang="scss">
  .el-tree {
    max-height: 200px;
    overflow-y: auto;
  }

  .iconPrint {
    color: #606266;
    padding-left: 15px;
    font-weight: 600;
    cursor: pointer;
  }

  .boldFont {
    font-weight: bold;
    color: black;
  }

  .innerDialogClass {
    ::v-deep .el-dialog__body {
      padding: 0 20px;
    }
  }


  .print-guide-dialog {
    border-radius: 12px;
    overflow: hidden;
    box-shadow: 0 8px 30px rgba(0, 0, 0, 0.15);
  }

  .print-guide-dialog .el-dialog__header {
    display: none;
  }

  .guide-container {
    font-family: 'Helvetica Neue', Arial, sans-serif;
  }

  .guide-header {
    background: linear-gradient(135deg, #409EFF, #66b1ff);
    color: white;
    padding: 25px 30px;
    text-align: center;
  }

  .guide-header i {
    font-size: 36px;
    margin-bottom: 10px;
  }

  .guide-header h3 {
    font-size: 20px;
    margin: 10px 0 5px;
    font-weight: 600;
  }

  .guide-header p {
    font-size: 14px;
    opacity: 0.9;
    margin: 0;
  }

  .guide-content {
    padding: 20px;
    max-height: 60vh;
    overflow-y: auto;
  }

  .guide-item {
    display: flex;
    margin-bottom: 20px;
    background: #f9fafc;
    border-radius: 8px;
    padding: 15px;
    transition: all 0.3s ease;
  }

  .guide-item:hover {
    transform: translateY(-2px);
    box-shadow: 0 4px 12px rgba(0, 0, 0, 0.08);
  }

  .guide-icon {
    width: 40px;
    height: 40px;
    border-radius: 50%;
    display: flex;
    align-items: center;
    justify-content: center;
    margin-right: 15px;
    flex-shrink: 0;
    color: white;
  }

  .guide-text h4 {
    margin: 0 0 8px 0;
    font-size: 16px;
    font-weight: 600;
    color: #303133;
  }

  .guide-text p {
    margin: 0;
    font-size: 14px;
    line-height: 1.6;
    color: #606266;
  }

  .guide-text .highlight {
    color: #F56C6C;
    font-weight: 500;
  }

  .dialog-footer {
    padding: 15px 20px;
    text-align: center;
  }

  .confirm-btn {
    padding: 10px 24px;
    font-size: 14px;
    border-radius: 20px;
    background: linear-gradient(to right, #409EFF, #66b1ff);
    border: none;
    box-shadow: 0 2px 6px rgba(64, 158, 255, 0.3);
  }

  .confirm-btn:hover {
    background: linear-gradient(to right, #66b1ff, #409EFF);
    transform: translateY(-1px);
  }

  .confirm-btn i {
    margin-right: 5px;
  }

  ::v-deep .el-dialog:not(.is-fullscreen) {
    margin-top: 0 !important;
  }
</style>
